<style>
	.hide1 {
		display: none;
	}

	.teachers_list{
		padding-top:15px;
		margin-top: 15px;
	}	

	.teacher_add_div{
		width:250px;
		height:200px;
		text-align: center;
		vertical-align: middle;
		border: solid #eee 1px;
	}
	.teacher_add_fields{
		margin:0;
		min-height: 180px;
		width:100%;
		border: solid #eee 1px;
	}
	.teacher_add_description{
		margin:0;
		min-height: 20px;
		width:100%;
		background-color: #eee;
		border: solid #eee 1px;
	}

	.teacher_add_field{
		margin-top: 0;
		margin-bottom: 3px;
	}

	.teacher_adddetail_list{
		margin-bottom: 0;
	}

	
</style>

<div>

	

	<h3 class="h3">Преподаватели</h3>  
	<div class="hide11 teacher_add">
	<a href="#">Добавить</a>
			<div class="hide11 teacher_add_div teacher_add1">
				<!--form action=""-->
					<div class="teacher_add_fields">
						<input class="teacher_add_field teacher_add_field_fio" type="text" 		placeholder="Ф.И.О."><br>	
						<!--input class="teacher_add_field teacher_add_field_login " type="text" 		placeholder="Логин"><br>	
						<input class="teacher_add_field teacher_add_field_pwd" type="password"  placeholder="Пароль"><br-->		
					</div>
					<div class="teacher_add_description">
						Аккаунт	 <button class="teacher_add1_submit">Далее</button>
						
					</div>
				<!--/form-->
			</div>
			<div class="hide1 teacher_add2">
				<div class="teacher_add_fields">
						<ul class="teacher_list_field_program">

						</ul>
						<select class="teacher_add_field teacher_add_field_program">
							<option value = "0">Программы</option>
							<?php 
								foreach ($courses as $course) {
									$format = "<option value=%d>%s</option>";
									echo sprintf($format,$course["course_id"], $course["course_name"]);
								}

							?>
						</select> <button class="teacher_add_field_program_option">+</button>
						<br>
						<ul class="teacher_list_field_addprogram">

						</ul>
						<select class="teacher_add_field teacher_add_field_addprogram">
							<option>Доп. Программы</option>
							<?php 
								foreach ($courses as $course) {
									$format = "<option value=%d>%s</option>";
									echo sprintf($format,$course["course_id"], $course["course_name"]);
								}

							?>
						</select><button class="teacher_add_field_addprogram_option">+</button>
						<br>
						<input class="teacher_add_field teacher_add_field_education " type="text" 	placeholder="Образование"><br>	
					</div>
					<div class="teacher_add_description">
						Знания	<button class="teacher_add2_submit">Далее</button>
					</div>
			</div>
			<div class="hide1 teacher_add3">
					<div class="teacher_add_fields">
						<input class="teacher_add_field teacher_add_field_fio" type="text" 		placeholder="Ф.И.О."><br>	
						<input class="teacher_add_field teacher_add_field_login " type="text" 		placeholder="Логин"><br>	
						<input class="teacher_add_field teacher_add_field_pwd" type="password"  placeholder="Пароль"><br>		
					</div>
					<div class="teacher_add_description">
						Занятость	 <button class="teacher_add3_submit">Далее</button>
						
					</div>
			</div>
			<div class="hide1 teacher_add4">
					<div class="teacher_add_fields">
						<input class="teacher_add_field teacher_add_field_phone" type="text" 		placeholder="phone"><br>	
						<input class="teacher_add_field teacher_add_field_email " type="text" 		placeholder="email"><br>	
						<input class="teacher_add_field teacher_add_field_adress" type="text"  placeholder="adress"><br>		
					</div>
					<div class="teacher_add_description">
						Контакты	 <button class="teacher_add4_submit">Далее</button>
						
					</div>
			</div>
			<div class="hide1 teacher_add5">
					<div class="teacher_add_fields">
						<input class="teacher_add_field teacher_add_field_birthday" type="text" 		placeholder="birthday"><br>	
						<label>Пол: </label>
						<input class="teacher_add_field teacher_add_field_sex " type="radio"  name="sex" value="0" /> M
						<input class="teacher_add_field teacher_add_field_sex " type="radio"  name="sex" value="1" /> Ж
					</div>
					<div class="teacher_add_description">
						Общее	 <button class="teacher_add5_submit">Далее</button>
						
					</div>
			</div>
			<div class="hide1 teacher_addfinal">
					<div class="teacher_add_fields">
						<input class="teacher_add_field teacher_add_field_fio" type="text" 		placeholder="Ф.И.О."><br>	
						<input class="teacher_add_field teacher_add_field_login " type="text" 		placeholder="Логин"><br>	
						<input class="teacher_add_field teacher_add_field_pwd" type="password"  placeholder="Пароль"><br>		
					</div>
					<div class="teacher_add_description">
						Дополнительно	 <button class="teacher_addfinal_submit">Далее</button>
						
					</div>
			</div>
			<div class="hide1 teacher_adddetail">
					<div class="teacher_add_fields">
						<ul class="teacher_adddetail_list">
							
						</ul>
					</div>
					<div class="teacher_add_description">
						Дополнительно	 <button class="teacher_addfinal_submit">Зарегистрировать</button>
						
					</div>
			</div>

		

	</div>
	<ul class="teachers_list">

	<?php foreach ($teachers as $teacher) { ?>
		<li >  <?php  echo $teacher['teacher_name'] ?> <a href="#"> Редактировать </a> </li>			
	<?php  } ?>
		
	</ul>

</div>
<script>
	
	
	$(function(){
		//first teacher
		//first click


		///////////////// NEXT STEP


		var teacher_info = {
			fio     : "",
			login   : "",
			pwd     : "",
			courses:[],
			add_courses:[],
			phone   : "",
			email   : "",
			adress  : ""
		}


		$(".teacher_add1_submit").click(function(){

			//fio

			$teacher_fio =  $(".teacher_add_field_fio").val();
			$teacher_login =  $(".teacher_add_field_login").val();
			$teacher_pwd =  $(".teacher_add_field_pwd").val();



			$data = {
				method:"teacher_add_1",
				data:{
					teacher_fio:$teacher_fio,
					teacher_login: $teacher_login,
					teacher_pwd: $teacher_pwd
				}
			}	


			/*
			$.ajax({
					type:'POST',
					url:ajaxurl + "?action=profile_ajax",
					data:$data
				})
				.done(function(resp){

					console.log(resp);
					var pos = resp.indexOf('{');
					resp = resp.slice(pos);
					var tail = resp.slice(resp.length -2, resp.length );
					if(tail === "}0") {
						resp =  resp.slice(0,-1);
					}
					resp = JSON.parse(resp);

					console.log(resp);

					teacher_info.fio   = $teacher_fio;
					teacher_info.login = resp.login;
					teacher_info.pwd   = resp.pwd;

			});
			*/

			teacher_info.fio = $teacher_fio;

			$(".teacher_add1").hide();
			$(".teacher_add2").show();
		});

				
		$(".teacher_add2_submit").click(function(){

			// knowlege 
			/*
			$teacher_program =  $(".teacher_add_field_program").val();
			$teacher_addprogram =  $(".teacher_add_field_addprogram").val();
			$teacher_education =  $(".teacher_add_field_education").val();
			*/

			/*
			$data = {
				method:"teacher_add_2",
				data:{
					teacher_program: $teacher_program,
					teacher_addprogram: $teacher_addprogram,
					teacher_education: $teacher_education
				}
			}	
			$.ajax({
					type:'POST',
					url:ajaxurl + "?action=profile_ajax",
					data:$data
				})
				.done(function(resp){
					var pos = resp.indexOf('{');
					resp = resp.slice(pos);
					var tail = resp.slice(resp.length -2, resp.length );
					if(tail === "}0") {
						resp =  resp.slice(0,-1);
					}
					resp = JSON.parse(resp);

			
				});

			*/


			var $ul  = $(".teacher_list_field_program");
			$("li", $ul).each(function(){
				var _c = "course_".length;
				var course = {}
				var classList =$(this).attr('class').split(/\s+/);
				$.each( classList, function(index, item){
				    if (  (item.indexOf('course_')+1) ) {
						course["course_id"]	 = item.slice(_c);
				    }
				});
				course["course_name"] = $(this).text();
				teacher_info.courses.push(course);
			});

			var $ul  = $(".teacher_list_field_addprogram");
			$("li", $ul).each(function(){
				var _c = "course_".length;
				var course = {}
				var classList =$(this).attr('class').split(/\s+/);
				$.each( classList, function(index, item){
				    if (  (item.indexOf('course_')+1) ) {
						course["course_id"]	 = item.slice(_c);
				    }
				});
				course["course_name"] = $(this).text();
				teacher_info.add_courses.push(course);
			});



			$(".teacher_add2").hide();
			$(".teacher_add4").show();
		});


		$(".teacher_add3_submit").click(function(){

			// ???

			$teacher_program =  $(".teacher_add_field_program").val();
			$teacher_addprogram =  $(".teacher_add_field_addprogram").val();
			$teacher_education =  $(".teacher_add_field_education").val();
			/*
			$data = {
				method:"teacher_add_3",
				data:{
					teacher_program: $teacher_program,
					teacher_addprogram: $teacher_addprogram,
					teacher_education: $teacher_education
				}
			}	
			$.ajax({
					type:'POST',
					url:ajaxurl + "?action=profile_ajax",
					data:$data
				})
				.done(function(resp){
					var pos = resp.indexOf('{');
					resp = resp.slice(pos);
					var tail = resp.slice(resp.length -2, resp.length );
					if(tail === "}0") {
						resp =  resp.slice(0,-1);
					}
					resp = JSON.parse(resp);

				});*/
				$(".teacher_add3").hide();
				$(".teacher_add4").show();
		});

		$(".teacher_add4_submit").click(function(){



			$teacher_phone =  $(".teacher_add_field_phone").val();
			$teacher_email =  $(".teacher_add_field_email").val();
			$teacher_adress =  $(".teacher_add_field_adress").val();

			/*

			$data = {
				method:"teacher_add_4",
				data:{
					teacher_program: $teacher_program,
					teacher_addprogram: $teacher_addprogram,
					teacher_education: $teacher_education
				}
			}	
			$.ajax({
					type:'POST',
					url:ajaxurl + "?action=profile_ajax",
					data:$data
				})
				.done(function(resp){
					var pos = resp.indexOf('{');
					resp = resp.slice(pos);
					var tail = resp.slice(resp.length -2, resp.length );
					if(tail === "}0") {
						resp =  resp.slice(0,-1);
					}
					resp = JSON.parse(resp);

				});
*/

			teacher_info.phone = $teacher_phone;
			teacher_info.email = $teacher_email;
			teacher_info.adress = $teacher_adress;

			$(".teacher_add4").hide();
			$(".teacher_add5").show();
		});
		$(".teacher_add5_submit").click(function(){
			$teacher_birthday =  $(".teacher_add_field_birthday").val();
			$teacher_sex =  $(".teacher_add_field_sex").val();
			/*
			$data = {
				method:"teacher_add_5",
				data:{
					teacher_program: $teacher_program,
					teacher_addprogram: $teacher_addprogram,
					teacher_education: $teacher_education
				}
			}	
			$.ajax({
					type:'POST',
					url:ajaxurl + "?action=profile_ajax",
					data:$data
				})
				.done(function(resp){
					var pos = resp.indexOf('{');
					resp = resp.slice(pos);
					var tail = resp.slice(resp.length -2, resp.length );
					if(tail === "}0") {
						resp =  resp.slice(0,-1);
					}
					resp = JSON.parse(resp);

				});*/

			teacher_info.birthday = $teacher_birthday;
			teacher_info.sex = $teacher_sex;

			/*
			fio     = "",
			login   = "",
			pwd     = "",
			courses:[],
			add_courses:[],
			phone   = "",
			email   = "",
			adress  = ""
			*/

			$(".teacher_add5").hide();
			$(".teacher_adddetail").show();

			var $ul = $(".teacher_adddetail_list");
			var lit = "<li />";
			var ult = "<ul />"
			var te  = "Ф.И.О.: " + teacher_info.fio;
			$ul.append(  $(lit).text(te) );

			
			var te  = "Логин: " + teacher_info.login;
			$ul.append(  $(lit).text(te) );

			var te  = "Pass: " + teacher_info.pwd;
			$ul.append(  $(lit).text(te) );


			var $ul_1 = $(ult);
			$.each(teacher_info.courses,function(k,v){
				te = v.course_name;
				$ul_1.append(  $(lit).text(te) );
			});

			var $li_1 = $(lit);
			$li_1.append("Программы:");
			$li_1.append($ul_1);
			$ul.append($li_1);

			var $ul_1 = $(ult);
			$.each(teacher_info.add_courses,function(k,v){
				te = v.course_name;
				$ul_1.append(  $(lit).text(te) );
			});

			var $li_1 = $(lit);
			$li_1.append("Доп. Программы:");
			$li_1.append($ul_1);
			$ul.append($li_1);



			var te  = "Телефон: " + teacher_info.phone;
			$ul.append(  $(lit).text(te) );

			var te  = "Email: " + teacher_info.email;
			$ul.append(  $(lit).text(te) );

			var te  = "Адрес: " + teacher_info.adress;
			$ul.append(  $(lit).text(te) );

			console.log("console");
			console.log(teacher_info);


			
		});

		
		$(".teacher_addfinal_submit").click(function(){
			$teacher_program =  $(".teacher_add_field_program").val();
			$teacher_addprogram =  $(".teacher_add_field_addprogram").val();
			$teacher_education =  $(".teacher_add_field_education").val();

			


			//  remove course duplicates 
			var m3 = [];
			$.each(teacher_info.add_courses , function(ind, val){
			      if( teacher_info.courses.indexOf(val) != -1 ){
			      		m3.push(val);
			      }
			});
			teacher_info.add_courses = m3;


			$data = {
				method:"teacher_add_final",
				data:teacher_info
			}	

			$.ajax({
					type:'POST',
					url:ajaxurl + "?action=profile_ajax",
					data:$data
				})
				.done(function(resp){

					/*
					var pos = resp.indexOf('{');
					resp = resp.slice(pos);
					var tail = resp.slice(resp.length -2, resp.length );
					if(tail === "}0") {
						resp =  resp.slice(0,-1);
					}

					resp = JSON.parse(resp);
					*/
					console.log(resp);
					
				});
		});

		///// 

		var picka_option1 =  {
						format:"dd-mm-yyyy",
				   		monthsFull: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
						weekdaysShort: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб' ],
						today: 'Сегодня',
						clear: 'Очистить',
						close: 'Закрыть',
						formatSubmit: 'dd-mm-yyyy',
						max: new Date(),
						selectYears:100,
						selectMonth:true		        	
			    };
			    
		jQuery(".teacher_add_field_birthday").pickadate(picka_option1);		



		$(".teacher_add_field_program_option").click(function(){
			var $ul = $(".teacher_list_field_program");
			var $course_id = $(".teacher_add_field_program option:selected").val();
			var $course_name = $(".teacher_add_field_program option:selected").text();
			var $li = $("<li />");
			$li.addClass("course_" + $course_id);
			$li.text($course_name);

			var canAdd = true;
			if( $course_id == 0 ){
				canAdd = false;
			}

			$("li", $ul).each(function(){
				if($(this).text() === $course_name){
					canAdd = false;
				}
			});

			if(canAdd) {
				$li.appendTo($ul);
			}


		});
		$(".teacher_add_field_addprogram_option").click(function(){
			var $ul = $(".teacher_list_field_addprogram");
			var $course_id = $(".teacher_add_field_addprogram option:selected").val();
			var $course_name = $(".teacher_add_field_addprogram option:selected").text();
			var $li = $("<li />");
			$li.addClass("course_" + $course_id);
			$li.text($course_name);

			var canAdd = true;
			if( $course_id == 0 ){
				canAdd = false;
			}

			$("li", $ul).each(function(){
				if($(this).text() === $course_name){
					canAdd = false;
				}
			});

			if(canAdd) {
				$li.appendTo($ul);
			}

		});
	});



</script>



